<template>
    <div class="goodslist">
        <ul>
            <li>
                <img src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone-se-red-select-2020_GEO_CN?wid=940&hei=1112&fmt=png-alpha&qlt=80&.v=1586574260132" alt="">
                <h6>iPhone SE（64GB）</h6>
                <p>
                    <span>￥3299</span>
                    <span><del>￥3799</del></span>
                </p>
                <div>
                    <span>热卖中</span>
                    <span>剩100件</span>
                </div>
            </li>
            <li>
                <img src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone-se-red-select-2020_GEO_CN?wid=940&hei=1112&fmt=png-alpha&qlt=80&.v=1586574260132" alt="">
                <h6>iPhone SE（64GB）</h6>
                <p>
                    <span>￥3299</span>
                    <span><del>￥3799</del></span>
                </p>
                <div>
                    <span>热卖中</span>
                    <span>剩100件</span>
                </div>
            </li>
            <li>
                <img src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone-se-red-select-2020_GEO_CN?wid=940&hei=1112&fmt=png-alpha&qlt=80&.v=1586574260132" alt="">
                <h6>iPhone SE（64GB）</h6>
                <p>
                    <span>￥3299</span>
                    <span><del>￥3799</del></span>
                </p>
                <div>
                    <span>热卖中</span>
                    <span>剩100件</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.goodslist{
    ul{
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        li{
            width: 45%;
            margin-top: 2.5%;
            margin-left: 3.3%;
            background-color: #fff;
            box-shadow: 0 0 10px silver;
            border: 1px solid lightgray;
            display: flex;
            flex-direction: column;
            img{
                width: 100%;
                height: 195px;
            }
            h6{
                font-size: 14px;
                font-weight: bold;
                padding-left: 5px;
                color: #000;
            }
            p{
                display: flex;
                &>span:nth-child(1){
                    color: crimson;
                    font-weight: bolder;
                    font-size: 20px;
                }
                &>span:nth-child(2){
                    margin-left: 5px;
                    font-size: 12px;
                }
            }
            div{
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                padding: 1px 5px;
                color: silver;
            }
        }
        
    }
}
</style>